<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="content-ones">
			<view class="all-inout">
				<view class="flex-row flex-content-between list-ones">
					<view>持卡人姓名</view>
					<view class="flex-row flex-content-end">
						<input class="input" type="text" v-model="form.name" placeholder="请输入姓名" placeholder-class="list-ones-input-p">
					</view>
				</view>
				<view class="flex-row flex-content-between list-ones">
					<view>证件类型</view>
					<view class="flex-row input-img flex-item-center">
						<view class="input-img-txt">请选择</view>
						<image src="../../static/index/index-you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between list-ones">
					<view>证件号码</view>
					<view class="flex-row flex-content-end">
						<input class="input" type="text" v-model="form.number" placeholder="请输入证件号码" placeholder-class="list-ones-input-p">
					</view>
				</view>
				<view class="flex-row flex-content-between list-ones">
					<view>储蓄卡号</view>
					<view class="flex-row flex-content-end">
						<input class="input" type="text" v-model="form.bankNumber" placeholder="请输入储蓄卡号" placeholder-class="list-ones-input-p">
					</view>
				</view>
				<view class="flex-row flex-content-between list-ones">
					<view>银行签约手机号</view>
					<view class="flex-row flex-content-end">
						<input class="input" type="text" v-model="form.mobile" placeholder="请输入签约手机号" placeholder-class="list-ones-input-p">
					</view>
				</view>
				<view class="flex-row flex-content-between list-ones" v-if="current==1">
					<view>银行卡安全码</view>
					<view class="flex-row flex-content-end">
						<input class="input" type="text" v-model="form.cvn" placeholder="请输入安全码" placeholder-class="list-ones-input-p">
					</view>
				</view>
				<view class="flex-row flex-content-between list-ones" v-if="current==1">
					<view>有效期</view>
					<view class="detal-body-input">
						<picker mode="date"  @change="changeDate" fields="month">
							<view :class="form.expiration_date?`detal-body-se`:``">{{form.expiration_date?form.expiration_date:"请选择"}}</view>
						</picker>
						</view>
				</view>
			</view>
			<mu-suspension bottom="46">
				<view class="flex-row">
					<view class="foot">确认添加</view>
				</view>
			</mu-suspension>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				current:0,//卡类型【0=储蓄卡，1=信用卡】
				form:{
					name:"",
					mobile:"",
					id_type:"",
					number:"",
					bankNumber:"",
					cvn:"",
					expiration_date:"",
				}
			}
		},
		onLoad(opt){
			if(opt.title){
				uni.setNavigationBarTitle({
					title:opt.title
				})
			}
			if(opt.current){
				this.current = opt.current
			}
		},
		methods:{
			//选择日期
			changeDate(e){
				console.log(e);
				var value = e.detail.value
				this.form.expiration_date = value;
			}
		}
	}
</script>

<style lang="scss">
	.detal-body-input{
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.foot{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 90rpx;
		margin-left: 175rpx;
	}
	.input-img-txt{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.input-img{
		>image{
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.input{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		text-align: end;
	}
	.list-ones-input-p{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.list-ones{
		margin-bottom: 70rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}
	}
	.all-inout{
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 50rpx;
	}
	.content-ones{
		width: 750rpx;
		height: calc(100vh - 110rpx);
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		// margin-top: 20rpx;
	}
</style>